<ui:composition template="/WEB-INF/template/main_template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="menu">
        <ui:include src="/WEB-INF/include/admin_menu.xhtml"/>
    </ui:define>

    <ui:define name="content">
        <h:form>
            <!--===== Product context menu =====-->
            <p:contextMenu for="productsTable">
                <p:menuitem value="#{msgs.view}" icon="ui-icon-search" action="/WEB-INF/hidden/product_info.xhtml"/>
                <p:menuitem value="#{msgs.edit}" icon="ui-icon-pencil"/>
                <p:menuitem value="#{msgs.create}" icon="ui-icon-document"/>
                <p:menuitem value="#{msgs.delete}" icon="ui-icon-close"/>
            </p:contextMenu>

            <!--===== Product data table =====-->
            <p:dataTable id="productsTable" var="aProduct" value="#{productController.products}"
                         rowKey="#{aProduct.id}" selection="#{productController.selectedProduct}" selectionMode="single"
                         widgetVar="productsTable" filteredValue="#{productController.filteredProducts}"
                         emptyMessage="#{msgs.noResults}">

                <f:facet name="header">
                    <p:outputPanel style="text-align: right">
                        <h:outputText value="#{msgs.searchAllFields}:"/>
                        <p:inputText id="globalFilter" onkeyup="PF('productsTable').filter()" style="width:150px"/>
                    </p:outputPanel>
                </f:facet>

                <p:column headerText="#{msgs.id}"
                          sortBy="#{aProduct.id}">
                    <h:outputText value="#{aProduct.id}"/>
                </p:column>

                <p:column headerText="#{msgs.ean}"
                          filterBy="#{aProduct.ean}" sortBy="#{aProduct.ean}">
                    <h:outputText value="#{aProduct.ean}"/>
                </p:column>

                <p:column headerText="#{msgs.name}"
                          filterBy="#{aProduct.name}" sortBy="#{aProduct.name}">
                    <h:outputText value="#{aProduct.name}"/>
                </p:column>

                <p:column headerText="#{msgs.brand}"
                          filterBy="#{aProduct.brand.name}" sortBy="#{aProduct.brand.name}">
                    <h:outputText value="#{aProduct.brand.name}"/>
                </p:column>

                <p:column headerText="#{msgs.category}"
                          filterBy="#{aProduct.category.name}" sortBy="#{aProduct.category.name}">
                    <h:outputText value="#{aProduct.category.name}"/>
                </p:column>

                <p:column headerText="#{msgs.price}"
                          filterBy="#{aProduct.price}" sortBy="#{aProduct.price}">
                    <h:outputText value="#{aProduct.price}"/>
                </p:column>

                <p:column headerText="#{msgs.quantity}"
                          filterBy="#{aProduct.quantity}" sortBy="#{aProduct.quantity}">
                    <h:outputText value="#{aProduct.quantity}"/>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>